<template>
  <div style="background: red;padding: 8px">
    <el-dialog v-model="isShow" :close-on-press-escape="false"
               :close-on-click-modal="false" class="assetDialog"
               @close="onClose" :width="'42%'">
      <template #header>
        <div style="color: black">{{ title }}</div>
      </template>
      <el-table ref="assetRef" class="assetPane" :data="holdData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" :label="'全选'" />
        <el-table-column :prop="'name'" header-align="center" align="center" :label="'名称'" />
        <el-table-column :prop="'name'" header-align="center" align="center" :label="'类型'" />
        <template #empty>暂无数据</template>
      </el-table>
      <template #footer>
        <el-form-item style="display: flex;flex-direction: row;">
          <div style="flex: 1"/>
          <span class="dialog-footer">
            <el-button @click="() => { isShow = false; }" style="padding: 0 24px 0;">
              关闭
            </el-button>
            <el-button type="primary" @click="onSubmit" style="padding: 0 24px 0;">
              增加资源
            </el-button>
          </span>
        </el-form-item>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {effect, ref} from "vue";
import {useStore} from "@/stores";
import {ElTable} from "element-plus";

interface AssetConfig {
  submit: any;
  holdData: any;
}

const store = useStore();
const props = defineProps<AssetConfig>();

const assetRef = ref();
const title = ref();

const roleData = ref();
const menuData = ref();
const permitData = ref();

const isShow = ref(false);

effect(() => {
  roleData.value = store.getCurrentPlatform().roleData;
  menuData.value = store.getCurrentPlatform().menuData;
  permitData.value = store.getCurrentPlatform().permitData;
})

const handleSelectionChange = (val: any) => {
  console.log('--- handleSelectionChange: ', val)
}

const onSubmit = async () => {
  if (props.submit) {
    props.submit();
  }
}

const onClose = () => {
  isShow.value = false;
}

const close = () => {
  isShow.value = false;
}

const editAssets = (t: string, item: Record<string, any>) => {
  title.value = t;
  isShow.value = true;
}

defineExpose({
  editAssets,
  close,
})

</script>

<style scoped>
.assetPane {
  height: 460px;
}
.dialog-footer {
  margin-right: 4px;
}

.dialog-footer {
  margin-top: 6px;
}

.dialog-footer button:first-child {
  margin-right: 16px;
}

:deep(.el-dialog__body) {
  margin: 0;
  padding: 12px 24px 16px;
}

:deep(.el-dialog__header) {
  width: 100%;
  height: 48px;
}

:deep(.el-dialog__footer) {
  border-top: 1px solid #e3e8ee;
  padding-bottom: 2px;
}

</style>